<template>
  <div class="main-box">
    <el-button
      icon="el-icon-plus"
      style="margin-bottom: 16px"
      type="primary"
      @click="backup"
    >
      {{ $t('备份数据库') }}
    </el-button>
    <el-table v-loading="loading" :data="dataBase">
      <!-- <el-table-column label="ID" prop="id" /> -->
      <el-table-column :label="$t('文件名')" prop="title" />
      <el-table-column :label="$t('文件大小')" prop="size" />
      <el-table-column
        :label="$t('操作')"
        fixed="right"
        width="100"
        align="right"
      >
        <template slot-scope="scope">
          <RestoreBtn @click="restore(scope.row)" :tips-content="$t('恢复')" />
          <DelBtn
            @click="getDele(scope.row)"
            :confirm-content="$t('删除该备份文件')"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import baseApi from '@/api/log'
export default {
  data() {
    return {
      dataBase: [],
      loading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 数据库备份
    backup() {
      this.loading = true
      baseApi.dataBackup().then(res => {
        this.loading = false
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.getList()
        }
      })
    },
    // 数据库文件列表
    getList() {
      baseApi.dataList().then(res => {
        this.dataBase = res.data
      })
    },
    // 还原
    restore(row) {
      baseApi.dataRestore({ filename: row.title }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.getList()
        }
      })
    },
    // 删除
    getDele(row) {
      baseApi.dataDelete({ filename: row.title }).then(res => {
        if (res.code == 0) {
          this.getList()
          this.$message.success(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped></style>
